<template>

	<view class="u-p-l-28 u-p-r-28 ">
		<view class="border-ra bg-white u-p-28 box-shadow u-m-t-35 animate__animated animate__flipInX" v-for="(item,index) in list" :key="index">
			<view class="u-flex u-row-between u-col-center u-font-lg u-border-bottom u-p-b-20">
				<view>名称:{{item.name}}</view>
				<view style="font-weight: 700;">
					<text style="color: #ffc300;" v-if="item.state==1">在线</text>
					<text style="color: #d35400;" v-else>离线</text>
				</view>
			</view>
			<view class="u-p-t-20">
				<u-button @click="outBind(item,index)" type="warning" size="mini" class="u-m-r-20">解绑</u-button>
			</view>
		</view>
	</view>

	<u-empty v-if="list.length===0" text="暂无接收器"></u-empty>

	<view class="submitBottom" @click="show = true">绑定接收器</view>

	<!-- 绑定接收器 -->
	<u-modal v-model="show" show-cancel-button title="绑定接收器" @confirm="yesConfirm" @cancel="noCancel">
		<template #default>
			<view class="u-m-l-40 u-m-r-40 u-m-t-40 u-m-b-40">
				<u-form label-width="auto" :model="form">
					<u-form-item label="接收器编号:">
						<u-input v-model="form.code" border placeholder="请输入接收器编号"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</template>
	</u-modal>
</template>

<script setup lang="ts">
	import { reactive, ref, watch } from "vue";
	import receiverApi from '@/api/receiver'
	const list = ref([])
	const show = ref(false)
	const form = reactive({
		code:''
	})

	const getList = () => {
		receiverApi.getReceiverList().then(res => {
			list.value = res.data
		})
	}

	getList()


	const yesConfirm = () => {
	    receiverApi.addReceiver(form).then(res=>{
			uni.showToast({
				title:res.msg
			})
			getList()
			noCancel()
		})
	}

	const noCancel = () => {
       form.code = ""
	}

	const outBind = (item, index) => {//解除绑定

		uni.showModal({
			title: "提示",
			content: "是否解除绑定",
			showCancel: true,
			cancelText: '取消',
			confirmText: '确定',
			success: res => {
				if (res.confirm) {
					receiverApi.unbindBinding({
						receiverId: item.id
					}).then(ress => {
						getList()
					})
				} else {
					// 否则点击了取消
				}
			}
		})

	}



</script>

<style>
</style>
